<!-- @format -->

<template>
  <form @submit.prevent="formSubmit">
    <SchemaForm :schema="schema" />

    <BaseButton type="submit">Submit</BaseButton>

    <pre>{{ userData }}</pre>
  </form>
</template>

<script>
  import { computed, ref } from 'vue'
  import FormText from './components/FormText.vue'
  import FormSelect from './components/FormSelect.vue'
  import FormCheckbox from './components/FormCheckbox.vue'
  import BaseButton from './components/BaseButton.vue'
  import { SchemaForm, useSchemaForm } from 'formvuelate'

  const SCHEMA = {
    firstName: {
      component: FormText,
      label: 'First Name',
    },
    lastName: {
      component: FormText,
      label: 'Last Name',
    },
    email: {
      component: FormText,
      label: 'Your email',
      required: true,
      config: {
        type: 'email',
      },
      validations: {
        _exclusive: {
          required: true,
        },
        errorMessage: 'Please enter a valid email',
      },
    },
    favoriteThingAboutVue: {
      component: FormSelect,
      label: 'Favorite thing about Vue',
      required: true,
      options: ['Ease of use', 'Documentation', 'Community'],
    },
    isVueFan: {
      component: FormCheckbox,
      label: 'Are you a Vue fan?',
    },
  }

  export default {
    components: { BaseButton, SchemaForm },
    setup() {
      const userData = ref({})
      useSchemaForm(userData)

      const schema = computed(() => {
        return userData.value.isVueFan
          ? {
              ...SCHEMA,
              feedback: {
                component: FormText,
                label: 'Gimme some feedback',
              },
            }
          : SCHEMA
      })

      const formSubmit = (val) => {
        console.log('val ===>', val)
      }

      return {
        userData,
        schema,
        formSubmit,
      }
    },
  }
</script>
